<#import "../common/layout.ftl" as layout/>
<#import "../common/dataTables.ftl" as dataTables/>
<#import "../common/modern-forms.ftl" as mform/>
<#import "../common/modal.ftl" as modal/>


<!DOCTYPE html>
<html>
<@layout.head title="资产型号管理">
    <@dataTables.head/>
    <@dataTables.buttons_head/>
    <@dataTables.select_head/>
    <@dataTables.fixedHeader_head/>
    <@mform.head/>
    <@select.head/>
<style>
    .showImagBox {
        position: relative;
    }

    .showImag {
        display: block;
        background-color: #efefef;
        margin: 3px;
        max-width: 100%;
        height: 300px;
        position: relative;
    }

    .showImagBox img {
        max-width: 100%;
        min-height: 100px;
    }

    .showImagBox img:before {
        content: "点击上传";
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        border-left: 2px solid #d9d9d9;
        color: #ccc;
        width: 160px;
        font-size: 1.4em;
        line-height: 39.5px;
        text-align: center;
        background-color: transparent;
    }

    .showImagBox img:after {
        left: calc(50% - 80px);
        content: " ";
        position: absolute;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        background-color: #d9d9d9;
        width: 39.5px;
        height: 2px;
    }

    body, html {
        background: none;
    }

    .imgButton {
        width: 100%;
        height: 40px;
        text-align: center;
        display: flex;
    }

    .imgButton span {
        flex: 1;
        margin: 0px 30px;
        display: block;
        font-size: 16px;
        line-height: 40px;
        background-color: #0ACD74;
        color: #fff;
        padding: 0px 50px;
        border-radius: 20px;
    }
</style>
<script src="${request.contextPath}/assets/js/myImgTool.js?v=3653060703"></script>
</@layout.head>
<body>
<@layout.page>
<div class="main-box">
    <div class="content">
        <!-- 表格 -->
        <div style="position: relative;top:0px;">
            <@dataTables.commonTable id="mainTable"/>
        </div>
        <div id="searchGroup" class="btn-group" style="position: absolute;top:0px;">
            <div style="float: left">
                <select class='form-control' id='types1' placeholder='请选择一级分类'
                        style='width:150px; margin-left: 10px;float: left' onchange="typesChange()">
                    <option value='0'>请选择一级分类-0</option>
                    <#list eqRootClass as item>
                        <option value="${item.id?c}">${item.name}-${item.code}</option>
                    </#list>
                </select>
            </div>
            <div style="float: left" id='types2Box'>

            </div>
            <div style="float: left">
                <select class='form-control' id='brands' placeholder='请选择品牌'
                        style='width:150px; margin-left:10px;float: left'>
                    <option value='0'>请选择品牌</option>
                    <#list brand as item>
                        <option value="${item.code}">${item.name}</option>
                    </#list>
                </select>
            </div>
            <button id="btnAddTopMenu" type="button" class="btn btn-blue btn-sm" style="margin-left: 10px;float:right"
                    onclick="javascript:deldetail();">
                <i class="fa fa-minus"></i> 删除
            </button>
            <button id="btnAddTopMenu" type="button" class="btn btn-blue btn-sm" style="margin-left: 10px;float:right"
                    onclick="javascript:editdetail();">
                <i class="fa fa-edit"></i> 修改
            </button>
            <button id="btnAddTopMenu" type="button" class="btn btn-blue btn-sm" style="margin-left: 10px;float:right"
                    onclick="javascript:newdetail();">
                <i class="fa fa-plus"></i> 新增
            </button>
            <button id="btnAddTopMenu" type="button" class="btn btn-blue btn-sm" style="margin-left: 10px;float:right"
                    onclick="javascript:refreshData();">
                <i class="fa fa-search"></i> 查询
            </button>
        </div>

        <div style="position: relative;">
            <!-- 表格 -->
            <div style="position: relative;top:0px;">
                <@dataTables.commonTable id="mainTable2"/>
            </div>
            <div id="searchGroup2" class="btn-group" style="position: absolute;top:0px;">
                <button id="btnAddTopMenu" type="button" class="btn btn-blue btn-sm"
                        onclick="javascript:refreshData2();">
                    <i class="fa fa-search"></i> 查询
                </button>
                <button id="btnAddTopMenu" type="button" class="btn btn-blue btn-sm"
                        style="margin-left: 10px;float:left"
                        onclick="javascript:editdetail2();">
                    <i class="fa fa-edit"></i> 未确认型号处理
                </button>
                <button id="btnAddTopMenu" type="button" class="btn btn-blue btn-sm"
                        style="margin-left: 10px;float:left"
                        onclick="javascript:saveTo();">
                    <i class="fa fa-arrow-up"></i> 合并到已存在型号
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 弹出窗 -->
    <@modal.editModal id="modal-detail" buttonId="btndetailSave" width="1000px" height="100px">
        <@mform.container  id="editForm" width="450px">
        <input id="id" name="id" type="hidden"/>
        <#--<input id="type" name="type" type="hidden"/>-->
        <#--<input id="brand" name="brand" type="hidden"/>-->
            <@mform.select2 id='types1F' name='types1F' label="一级类型"  size=12 onchange="typesChange2()">
                <option value="">请选择</option>
                <#list eqRootClass as item>
                <option value="${item.id?c}">${item.name}-${item.code}</option>
                </#list>
            </@mform.select2>
            <@mform.select2 id='type' name='type' label="二级类型"  size=12 >
            </@mform.select2>
            <@mform.select2 id='brand' name='brand' label="品牌"  size=12 >
                <#list brand as item>
                <option value="${item.code}">${item.name}</option>
                </#list>
            </@mform.select2>

            <@mform.input_text id='name' name='name' size=12 label='型号名称' placeholder='型号名称' icon='fa-edit' />
            <@mform.input_text id='code' name='code' size=12 label='型号编码' placeholder='型号编码' icon='fa-edit' />
            <@mform.input_textarea id='describe' name='describe' size=12 label='备注' placeholder='备注'/>
        </@mform.container>
        <@mform.container width="480px" id="editForm">
        <div class="showImagBox">
            <img src="" class="showImag" id="show">
            <div class="imgButton">
                <span id="bigImg">查看大图</span>
                <span id="reload">重新上传</span>
            </div>
        </div>
        <div style="display: none">
            <@mform.input_file id='Img' name='Img' size=4 label='上传资产图片' placeholder='上传资产图片' icon='fa-edit' />
        </div>
        </@mform.container>
    </@modal.editModal>


</@layout.page>
<@layout.foot>
    <@dataTables.foot/>
    <@dataTables.buttons_foot/>
    <@dataTables.select_foot/>
    <@dataTables.fixedHeader_foot/>
    <@mform.foot/>
<script src="${request.contextPath}/assets/js/jquery.serializejson.min.js?v=3653060703"></script>
<script type="text/javascript">
    var State = {
        <#list state as item>
            "${item.code}": "${item.name}",
        </#list>}

    function getType() {
        var types1 = $("#types1").find("option:selected").text().split("-")[1];
        var types2 = $("#types2").val();
        if (types2 == null || types2 == 0)
            return types1;
        else return types2;
    }

    function typesChange() {
        $.ajax({
            type: 'POST',
            data: {
                datas: JSON.stringify({
                    superId: $("#types1").val()
                })
            },
            url: "${request.contextPath}/base/eqClass/queryList",
            success: function (data) {
                var data = data.datas;
                //成功之后
                var box = $("#types2Box");
                box.html("");
                if (data.length > 0 && $("#types1").val() != 0) {
                    //动态加载下拉框
                    var select = $("<select class='form-control' id='types2')> <option value=0>选择二级分类</option> </select>");
                    for (var i = 0; i < data.length; i++) {
                        select.append("<option value='" + data[i].code + "'>" + data[i].name + "</option>");
                    }
                    box.append(select);
                    select.select2();
                }
            },
            error: function (xhr, type) {
                swal("错误", "系统发生内部错误!请稍后再试!", "error");
            }
        });
    }

    function typesChange2(initValue) {
        $("#editForm #type").children().remove();
        $.ajax({
            type: 'POST',
            data: {
                datas: JSON.stringify({
                    superId: $("#types1F").val()
                })
            },
            url: "${request.contextPath}/base/eqClass/queryList",
            success: function (data) {
                var data = data.datas;
                //成功之后
                if (data.length > 0 && $("#types1F").val() != 0) {
                    //动态加载下拉框
                    var select = $("#editForm #type");
                    for (var i = 0; i < data.length; i++) {
                        select.append("<option value='" + data[i].code + "'" + (data[i].code == initValue ? "selected='selected'" : "") + " >" + data[i].name + "</option>");
                    }
                }
            },
            error: function (xhr, type) {
                swal("错误", "系统发生内部错误!请稍后再试!", "error");
            }
        });
    }

    var columns = [
        {"sWidth": "40px", "title": "id", "data": "id"},
        {"sWidth": "100px", "title": "产品类型", "data": "types"},
        {"sWidth": "100px", "title": "品牌", "data": "brands"},
        {"sWidth": "100px", "title": "型号", "data": "name"},
        {"sWidth": "100px", "title": "编码", "data": "code"},
        {"sWidth": "120px", "title": "备注", "data": "describe"},
        {"sWidth": "120px", "title": "新增时间", "data": "createTime"},
        {"sWidth": "120px", "title": "修改时间", "data": "updateTime"}]

    var mainTable = $('#mainTable').winningTable({
        columns: columns,
        pageLength: 10,
        fixedHeader: false,
        searching: true,
        ordering: false,
        "columnDefs": [{
            "targets": [0],
            "visible": false
        }],
        buttons: [],
        "rowCallback": function (row, data, index) {
            $('td', row).eq(7).html(State[data.state]);
        }
    });

    var columns2 = [
        {"sWidth": "100px", "title": "产品类型", "data": "types"},
        {"sWidth": "100px", "title": "品牌", "data": "brands"},
        {"sWidth": "100px", "title": "型号", "data": "name"},
        {"sWidth": "100px", "title": "编码", "data": "code"},
        {"sWidth": "120px", "title": "备注", "data": "describe"},
        {"sWidth": "120px", "title": "新增时间", "data": "createTime"},
        {"sWidth": "120px", "title": "修改时间", "data": "updateTime"}]

    var mainTable2 = $('#mainTable2').winningTable({
        columns: columns2,
        pageLength: 10,
        fixedHeader: false,
        searching: true,
        ordering: false
    });

    function newdetail() {

        $('#modal-detail').find(".modal-title").text('新增型号');
        clearForm($('#modal-detail'));
        $("#show").attr("src", "");
//        $('#modal-detail').find("#type").val(getType());
//        $('#modal-detail').find("#brand").val($("#brands").val());
        $("#btndetailSave").unbind();
        $("#btndetailSave").click(savedetail);
        $('#modal-detail').modal();
    }

    function editdetail() {
        var datas = mainTable.getSelectedDatas();
        if (datas == null || datas.length == 0 || datas.length > 1) {
            swal("错误", "请选择一行数据", "error");
            return;
        }
        var $modal = $("#modal-detail");
        $modal.find(".modal-title").text("修改型号信息");
        clearForm($modal);
        var data = datas[0];
        initFormItemData($("#editForm"), data);
        typesChange2(data.type);
        $("#show").attr("src", data.image);
        $("#btndetailSave").unbind();
        $("#btndetailSave").click(savedetail);
        $modal.modal();
    }

    function editdetail2() {
        var datas = mainTable2.getSelectedDatas();
        if (datas == null || datas.length == 0 || datas.length > 1) {
            swal("错误", "请选择一行数据", "error");
            return;
        }
        var $modal = $("#modal-detail");
        $modal.find(".modal-title").text("处理未确认型号");
        clearForm($modal);
        var data = datas[0];
        initFormItemData($("#editForm"), data);
        typesChange2(data.type);
        $("#show").attr("src", data.image);
        $("#btndetailSave").unbind();
        $("#btndetailSave").click(savedetail);
        $modal.modal();
    }

    function refreshData() {
        var data = {
            datas: JSON.stringify({
                types: getType(),
                brands: $("#brands").val(),
                state: "120001"
            })
        }
        mainTable.queryData("${request.contextPath}/equipment/model/queryList", data);
    }

    function refreshData2() {
        var data = {
            datas: JSON.stringify({
                state: "120002"
            })
        }
        mainTable2.queryData("${request.contextPath}/equipment/model/queryList", data);
    }

    refreshData();
    refreshData2();

    function savedetail() {
        swal({
            title: "确定保存",
            text: "是否确定保存此数据",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "是的,确定",
            cancelButtonText: "取消"
        }).then(function (result) {
            if (!result.value)
                return;
            var requestData = $("#editForm form").serializeJSON();
            var scoreImg = $("#show").attr("src");
            if (scoreImg.startsWith("data:image")) {
                requestData.image = scoreImg;
            } else {
                requestData.image = "";
            }
            var params = {datas: JSON.stringify(requestData)};
            $.ajax({
                type: 'POST',
                data: params,
                url: '${request.contextPath}/equipment/model/save',
                success: function (data) {
                    //成功之后
                    if (data.success) {
                        swal({
                            title: "成功",
                            text: "操作成功!",
                            type: "success",
                            showCancelButton: false,
                            confirmButtonText: "确定"
                        }).then(function (result) {
                            $("#modal-detail").modal('hide');
                            refreshData();
                            refreshData2();
                        });
                    } else {
                        swal("错误", data.errorMsg, "error");
                    }
                },
                error: function (xhr, type) {
                    swal("错误", "系统发生内部错误!请稍后再试!", "error");
                }
            });
        });
    }

    function deldetail() {
        var datas = mainTable.getSelectedDatas();
        if (datas == null || datas.length == 0 || datas.length > 1) {
            swal("错误", "请选择一行数据", "error");
            return;
        }
        var data = datas[0];
        swal({
            title: "确定删除",
            text: "是否确定删除此数据",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "是的,确定",
            cancelButtonText: "取消"
        }).then(function (result) {
            if (!result.value)
                return;
            var requestData = {
                id: data.id
            };
            var params = {datas: JSON.stringify(requestData)};
            $.ajax({
                type: 'POST',
                data: params,
                url: '${request.contextPath}/equipment/model/delete',
                success: function (data) {
                    //成功之后
                    if (data.success) {
                        swal({
                            title: "成功",
                            text: "操作成功!",
                            type: "success",
                            showCancelButton: false,
                            confirmButtonText: "确定"
                        }).then(function (result) {
                            refreshData();
                        });
                    } else {
                        swal("错误", data.errorMsg, "error");
                    }
                },
                error: function (xhr, type) {
                    swal("错误", "系统发生内部错误!请稍后再试!", "error");
                }
            });
        });

    }

    //将未确认设置为已存在的数据
    function saveTo() {
        var datas = mainTable.getSelectedDatas();
        if (datas == null || datas.length == 0 || datas.length > 1) {
            swal("错误", "请选择一行正常型号数据", "error");
            return;
        }
        var datas2 = mainTable2.getSelectedDatas();
        if (datas2 == null || datas2.length == 0 || datas2.length > 1) {
            swal("错误", "请选择一行未确认型号数据", "error");
            return;
        }
        var data2 = datas2[0];
        var data = datas[0];
        swal({
            title: "确定合并",
            text: "是否确定将此未确认型号" + data2.name + "合并到" + data.name,
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "是的,确定",
            cancelButtonText: "取消"
        }).then(function (result) {
            if (!result.value)
                return;
            var requestData = {
                toId: data.id,
                oneCode: data.type,
                brandCode: data.brand,
                name: data.types + "-" + data.brands + "-" + data.name + "-" + data.code,
                model: data.name + "-" + data.code,
                fromId: data2.id
            };
            var params = {datas: JSON.stringify(requestData)};
            $.ajax({
                type: 'POST',
                data: params,
                url: '${request.contextPath}/equipment/model/saveTo',
                success: function (data) {
                    //成功之后
                    if (data.success) {
                        swal({
                            title: "成功",
                            text: "操作成功!",
                            type: "success",
                            showCancelButton: false,
                            confirmButtonText: "确定"
                        }).then(function (result) {
                            refreshData();
                            refreshData2();
                        });
                    } else {
                        swal("错误", data.errorMsg, "error");
                    }
                },
                error: function (xhr, type) {
                    swal("错误", "系统发生内部错误!请稍后再试!", "error");
                }
            });
        });

    }

    $("#show").on("click", function () {
        $("#Img").trigger("click")
    })
    $("#reload").on("click", function () {
        $("#Img").trigger("click")
    })
    $("#bigImg").on("click", function () {
        if ($("#show").attr("src") != null && $("#show").attr("src") != "") {
            var big = $("<div style='position: absolute;top:0px;left:0px;width: 100%;height: 100%;background-color: rgba(0,0,0,0.5); text-align: center;z-index: 9999;'><img style='margin-top:20px;max-width: 80%;max-height:80%;' src='" + $("#show").attr("src") + "'/></div>")
            $("body").append(big);
            big.on("click", function () {
                big.children().remove();
                big.remove();
            })
        }

    })
    $("#Img").on("change", function () {
        //获取文件  
        var file = $("#Img")[0].files;
        imgZip(file, $("#show"), 800, 800);
    })
</script>
</@layout.foot>
</body>
</html>